<template>
  <div ref="el"></div>
</template>

<script lang="ts">
import {onMounted, ref} from "vue";
import * as d3 from "d3-selection";
import * as d3Array from "d3-array";
import * as d3Scale from "d3-scale";
import * as d3Axis from "d3-axis";

export default {
  name: "D3Axis",
  setup() {
    const el = ref(null)

    onMounted(() => {

      const width = 400, height = 400;
      const data: number[] = [100, 150, 200, 250, 280, 300];
      const svg = d3.select(el.value)
          .append("svg")
          .attr("width", width)
          .attr("height", height)

      console.log(d3Array.max(data))

      const maxVal = d3Array.max(data) as number;
      const xScale = d3Scale.scaleLinear()
          .domain([0, maxVal])
          .range([0, width - 100]);
      const yScale = d3Scale.scaleLinear()
          .domain([0, maxVal])
          .range([height / 2, 0]);

      const x_axis = d3Axis.axisBottom(xScale)
      const y_axis = d3Axis.axisLeft(yScale)
      svg.append("g")
          .attr("transform", "translate(50, 10)")
          .call(y_axis);

      const xAxisTranslate = height / 2 + 10;
      svg.append("g")
          .attr("transform", "translate(50, " + xAxisTranslate + ")")
          .call(x_axis)

    })
    return {el}
  }
}
</script>

<style scoped>

</style>
